import { useState } from "react"
import './App.css'
import video1 from './public/video1.mp4'
// 中部组件
const middleList=[
  {
    id:1,
    divName:'学习'
  },
  {
    id:2,
    divName:'生活'
  },
  {
    id:3,
    divName:'工作'
  }
]
// 导入视频
function App() {
  // 头部组件动画
  const text='第一个react项目'
  const container=document.querySelector('.text-overlay')
  const dataText=text.split('')
  // console.log(container.innerHTML)
  // alert(dataText)
  let index=0
  let timer=null
  const writer=()=>{
    if(index<dataText.length){
      container.innerText+=dataText[index++]
    }else{
      clearInterval(timer)
    }
  }
  timer=setInterval(writer,200)
  // 清空container
  // console.log(container.innerHTML)

  // 中部动画
  const [middleBox,setMiddleList]=useState(middleList)
  // setMiddleList(middleList)
  return (
    <div className="App">
      {/* 头部图片+动画宣传 */}
      <div class="header">
        <video class="video-box" loop="loop" autoplay="autoplay" muted>
          <source src={video1} type="video/mp4" onError={(e)=>alert('视频加载错误')}/>
        </video>
        {/* 打字机效果 */}
        <div class="typerwriter-container">
          <div class="text-overlay">
            {/* <div></div> */}
            <span class="typerwriter-cursor"></span>
          </div>
          
        </div>
        
      </div>
      {/* 中部动画 */}
      <div class="middle">
        {middleBox.map(item=>{
          return <div key={item.id} class="middle-box">{item.divName}</div>
        })}
      </div>
      {/* 底部评论 */}
      <div class="bottom">

      </div>
    </div>
  );
}

export default App;
